<template>
  <div class="data-table-container">
    <el-table 
      :data="data" 
      v-loading="loading" 
      style="width: 100%" 
      v-bind="$attrs"
    >
      <slot></slot>
    </el-table>
    
    <div class="pagination-container" v-if="showPagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageSizes"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'

/**
 * 组件属性定义
 */
const props = defineProps({
  // 表格数据
  data: {
    type: Array,
    default: () => []
  },
  // 加载状态
  loading: {
    type: Boolean,
    default: false
  },
  // 是否显示分页
  showPagination: {
    type: Boolean,
    default: true
  },
  // 数据总数
  total: {
    type: Number,
    default: 0
  },
  // 当前页码
  modelValue: {
    type: Number,
    default: 1
  },
  // 每页条数
  pageSize: {
    type: Number,
    default: 10
  },
  // 可选每页条数
  pageSizes: {
    type: Array,
    default: () => [10, 20, 30, 50]
  },
  // 分页布局
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  }
})

/**
 * 组件事件定义
 */
const emit = defineEmits([
  'update:modelValue',
  'update:pageSize',
  'size-change',
  'current-change',
  'pagination-change'
])

// 当前页码
const currentPage = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

// 监听页码变化
watch(() => props.modelValue, (val) => {
  currentPage.value = val
})

/**
 * 处理每页条数变化
 * @param {number} size - 新的每页条数
 */
const handleSizeChange = (size) => {
  emit('update:pageSize', size)
  emit('size-change', size)
  emit('pagination-change', { page: currentPage.value, size })
}

/**
 * 处理页码变化
 * @param {number} page - 新的页码
 */
const handleCurrentChange = (page) => {
  emit('current-change', page)
  emit('pagination-change', { page, size: props.pageSize })
}
</script>

<style lang="scss" scoped>
.data-table-container {
  width: 100%;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 